<template>
	<view class="agreement-layout">
		<view class="agreement-check-box" @tap.stop="agreeAction">
			<image class="agreement-check" :src="props.isChecked ? '/static/login/checkboxsel@2x.png' : '/static/login/checkboxnol@2x.png'" mode="aspectFit"></image>
			<text class="agreement-check-text">{{text}}</text>
		</view>
		<view v-if="showAgreement" class="agreement-content-box">
			<text class="agreement-text" @tap="showAgreementInfo(1)">《用户协议》</text>
			<text>和</text>
			<text class="agreement-text" @tap="showAgreementInfo(2)">《隐私政策》</text>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { app_user_agreement, app_user_privacy } from '@/common/config/config.js'
	const props = defineProps({
		//是否显示协议
		showAgreement:{
			type:Boolean,
			default:false
		},
		text:{
			type:String,
			default:'已经阅读并同意'
		},
		isChecked:{
			type:Boolean,
			default:false
		}
	})
	const emits = defineEmits(['change'])
	//勾选/取消勾选
	const agreeAction = () => {
		emits('change',!props.isChecked)
	}
	//查看协议信息
	const showAgreementInfo = (type) => {
		if (type == 1) {
			uni.navigateTo({
				url: `/pages/webview/webview?title=用户协议&url=${app_user_agreement()}`
			})
		} else if (type == 2) {
			uni.navigateTo({
				url: `/pages/webview/webview?title=隐私政策&url=${app_user_privacy()}`
			})
		}
	}
</script>

<style lang="scss" scoped>
	.agreement-layout {
		display: flex;
		align-items: center;
		.agreement-check-box{
			display: flex;
			align-items: center;
			.agreement-check-text{
				font-size: 26rpx;
				color: #8E8D92;
				margin-left: 10rpx;
			}
			.agreement-check{
				width: 26rpx;
				height: 26rpx;
				flex-shrink: 0;
			}
		}
		.agreement-content-box{
			display: flex;
			align-items: center;
			color: #8E8D92;
			font-size: 26rpx;
			.agreement-text{
				color: $xh-theme-color;
			}
		}
		
	}
</style>